<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-12">
    <div class="max-w-md w-full text-center">
      <h1 class="text-9xl font-extrabold text-gray-700">404</h1>
      <div class="w-full flex justify-center my-4">
        <FileQuestion class="h-24 w-24 text-gray-400" />
      </div>
      <h2 class="text-2xl font-semibold text-gray-900 mb-2">页面未找到</h2>
      <p class="text-gray-500 mb-8">
        抱歉，您访问的页面不存在或已被移除。
      </p>
      <router-link to="/" class="home-button">
        <HomeIcon class="icon" />
        返回首页
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { FileQuestion, HomeIcon } from 'lucide-vue-next';
</script>

<style scoped>
.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  background-color: #0d9488; /* teal-600 equivalent */
  text-decoration: none;
  transition: background-color 0.2s;
}

.home-button:hover {
  background-color: #0f766e; /* teal-700 equivalent */
}

.home-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.5);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}
</style>
